<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Disposition" content="inline" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="icon" href="data:;base64,=" />
    <meta name="description" content="鲸拍" />
    <meta name="author" content="鲸拍" />
    <meta name="keyword" content="鲸拍" />
    <title>文章详情</title>
    <style>
        *{margin:0;padding:0;font-family: "微软雅黑";}
        a{outline: none;text-decoration:none;-webkit-tap-highlight-color: transparent;}
        iframe{width:100%;height:250px;}
        .headTitle{width: 100%;height: 21px;line-height: 21px;padding:12px 0;background-color: #fff;margin-bottom: 20px;position:fixed;top:0;left:0;text-align: center;font-size: 1em;color: #333;}

        .detail{display:inline-block;margin: 0 auto;text-align:center;}
        .shareBtn{float: right;margin-right: 10px;width: 20px;overflow: hidden;text-align: center;}
        .shareBtn img{width: 100%;display: block;text-align: center;}
        .goback{width:9px;display: block;float: left;padding: 1px 0;}
        .goback img{width:100%;display: block;margin:0 10px;}
        .yy{width: 100%;}
        .yy img{width: 100%;}
        header{font-size: 1.125em;line-height:1.6em;font-weight: bold;text-align: center;width: 90%;margin: 0 auto;margin-top: 10px;margin-bottom: 10px;}
        .wrap{width: 90%;margin: 0 auto;line-height: 1.8em;font-size: 1em;color: #333;overflow:hidden;}
        .wrap p,.wrap div,.wrap section{width:100% !important;overflow:hidden;margin: 5px auto !important;margin-top:5px !important;margin-bottom: 5px !important;padding-left: 0px !important;padding-right: 0px !important;}
        .wrap img{width: 100%;margin: 0.5em auto;}
        .num{text-align: right;color: #999999;font-size: 1em; float: right;}
        .mask{width: 100%;height: 100%;background: rgba(0,0,0,.65);position: absolute;top: 0;left: 0;z-index: 3;}
        .wrapShare{width: 74%;position: absolute;top:40%;left: 11%;background: #fff;z-index: 9;padding: 20px 2%;border-radius: 10px;text-align: center;}
        .title{color: rgb(33,33,33);}
        .share{width: 18%;color:rgb(128,128,128);text-decoration: none;font-size:0.8em;text-align:center;display: inline-block;margin:1em;display: inline-block;}
        .share img{width: 100%;}
        .popBox{display: none;}
        .overHidden{overflow:hidden;height:100%;}
        .time{display: inline-block;padding-right: 0.6rem ;font-size: 1rem;}
        .hgroup{color: #999999;}
        .sename{padding-left: 0.6rem;}
        .text{text-indent: 2rem;}
        .discussArea{padding:0 10px;font-size: 1.2em;margin-bottom: 80px;}
        .dis_t{margin: 10px 0; line-height: 20px;}
        .square{width: 6px;height: 20px;background: #417eee;margin-right: 10px;float: left;border-radius: 3px;}
        .dis_list{overflow: hidden;width: 100%;}
        .dis_list li{border-bottom: 1px solid #eee;overflow: hidden;padding: 10px 0;}
        .dis_head{overflow: hidden;}
        .dis_head .head_pic{width: 1.8em;height: 1.8em;float: left;overflow: hidden;border-radius: 50%;margin-right: 10px;}
        .head_pic img{width: 100%;height: 100%;}
        .dis_info{width: 88%;float: left;line-height: 2em;font-size: 0.9em;}
        .dis_info .name{font-size: 0.8em;color: #333;display: inline-block;}
        .dis_info .grade{font-size: 0.7em;color: #808080;}
        .good{float: right;color: #808080;font-size: 0.6em;}
        .good img{width: 1.3em;padding-top: 0.5em;}
        .dis_con{font-size: 0.8em;line-height: 24px;margin-left: 3em;margin-top: 1em;margin-bottom: 0.1em;}
        .dis_time{float: right;color: #808080;font-size: 0.6em;}
        .dis_quote{font-size: 0.7em;margin-left: 3.5em;margin-top:0.7em;background: #f5f5f5;color: #808080;padding:0.5em 1em;}
        .dis_quote span{color:#507daf; }
        .basicall{
            width:10%;
            height:40px;
            margin-left:45%;
            margin-top: 10px;
        }
        div,a,img {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select:none;
        }


        .heart {
            background: url(../images/web_heart_animation.png);
            background-position: left;
            background-repeat: no-repeat;
            height: 60%;
            width: 25%;
            cursor: pointer;
            position: absolute;
            background-size: 2900%;
            margin-left:37.5%;
            bottom:19px;
        }

        .heart:hover,
        .heart:focus {
            background-position: right;
        }

        @-webkit-keyframes heartBlast {
            0% {
                background-position: left;
            }
            100% {
                background-position: right;
            }
        }

        @keyframes heartBlast {
            0% {
                background-position: left;
            }
            100% {
                background-position: right;
            }
        }

        .heartAnimation {
            display: inline-block;
            -webkit-animation-name: heartBlast;
            animation-name: heartBlast;
            -webkit-animation-duration: .8s;
            animation-duration: .8s;
            -webkit-animation-iteration-count: 1;
            animation-iteration-count: 1;
            -webkit-animation-timing-function: steps(28);
            animation-timing-function: steps(28);
            background-position: right;
        }

    </style>
    <link rel="stylesheet" href="/plugins/layui/css/layui.css">
</head>
<body>
<!--<div class="headTitle">
  <a href="javascript:;" class="goback"><img src="../../images/fanhui.png"/></a>
  <div class="shareBtn"><img src="../../images/share.png"/></div>
  <div class="yy"><img src="../../images/yinying.png" alt=""/></div>
</div>-->
<header class="title" th:text="${news.newsTitle}">李克强：支持地方和基层结合实际主动试大胆闯</header>
<section class="wrap" >
    <p><span class="hgroup time" th:text="${news.releaseTime}">2017-9-10</span>
        <!--<span class="hgroup">|</span>-->
        <!--<span class="hgroup sename">白冰</span>-->
        <span class="num">阅读量：<span th:text="${news.pv}">98312</span></span>
    </p>
    <p th:utext="${news.newsContent}">国务院总理李克强4月5日主持召开国务院常务会议，部署落实2017年经济体制改革重点任务，依靠改革破难题促发展惠民生；确定当前和今后一段时期促进就业创业的政策措施，坚决打好稳定和扩大就业的硬仗。</p>
</section>
<!--  th:if="${userId!=null}" -->
<div style="height: 70px;width:100%;float: left;position: relative">
    <div class="zan-index" th:if="${userId!=null}">
        <div class="heart " id="like1" rel="like"></div>
    </div>
</div>
<div class="discussArea" th:if="${#lists.isEmpty(comments)==false}">
    <div class="dis_t"><span class="square"></span>评论</div>
    <ul id="disList" class="dis_list" >
        <!--<li th:each="comment,voStat: ${comments}">-->
        <!--<div class="dis_head">-->
        <!--<div class="head_pic"><img src="http://tupian.aladd.net/2015/10/641.jpg"  th:src="${comment.memberHeadSculpture}" alt="" /></div>-->
        <!--<div class="dis_info">-->
        <!--<div class="name" th:text="${comment.memberNickname}">月宫手绘</div>-->
        <!--<div class="dis_time" th:text="${comment.commentTime}"></div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div class="dis_con" th:text="${comment.commentContent}" >我大中华雄起...</div>-->
        <!--</li>-->
    </ul>
</div>

</body>

<!--<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>-->
<!--<script src="../../script/deviceType.js" type="text/javascript" ></script>-->
<script src="/plugins/jquery.min.js"></script>
<script src="/plugins/layui/layui.js"></script>
<script th:inline="javascript">
    var newsId = /*[[${news.newsId}]]*/ "";
    var userId = /*[[${userId}]]*/ "";
    var praiseStatus = /*[[${praiseStatus}]]*/ false;
    var requestData = {
        "userId" : userId,
        "newsId" : newsId
    };
    var obj = document.getElementById("Img");
    if (praiseStatus) {
        $('.heart').addClass("heartAnimation").attr("rel", "unlike");
    }
    $('.heart').on("click",function() {
        $(this).css("background-position", "")
        var zan = $(this).attr("rel");
        if(zan === 'like') {
            $(this).addClass("heartAnimation").attr("rel", "unlike");
            praise();
        }else{
            $(this).removeClass("heartAnimation").attr("rel", "like");
            $(this).css("background-position", "left");
            cancelPraise();
        }
    });

    function praise () {
        $.ajax({
            type: "POST",
            url: "/newspraise",
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify(requestData),
            dataType: "json",
            success: function (data) {
                if (data.code && data.code==='success') {
                    obj.setAttribute("src", "/images/dz1.png");
                } else {
                    layer.msg(data.message+"，请重试",{icon:2,time:1000});
                }
            },
            error: function (data) {
                layer.msg(data.message,{icon:2,time:1000});
            }
        });
    }
    function cancelPraise() {
        $.ajax({
            type: "DELETE",
            url: "/newspraise",
            contentType: "application/json;charset=UTF-8",
            data:JSON.stringify(requestData),
            dataType: "json",
            success: function (data) {
                if (data.code && data.code==='success') {
                    obj.setAttribute("src", "/images/dz.png");
                } else {
                    layer.msg(data.message+"，请重试",{icon:2,time:1000});
                }
            },
            error: function (data) {
                layer.msg(data.message,{icon:2,time:1000});
            }
        });
    }






</script>
</html>